<template>
    <!-- 总盒子 -->
    <div class="box-whole">
        <div class="setp">
            <div class="setp-top">
                <el-dialog v-model="dialogTableVisible" draggable="true" title="设置">
                    <el-table :data="gridData">
                        <el-table-column property="date" label="#" width="150" />
                        <el-table-column property="name" label="列名" width="200" />
                        <el-table-column label="是否显示"><el-checkbox></el-checkbox></el-table-column>
                    </el-table>
                    <div class="setp-button">
                        <el-button :icon="Close">取消</el-button>
                        <el-button type="primary" :icon="Refresh">重置</el-button>
                        <el-button type="success" :icon="Select">确定</el-button>
                    </div>
                </el-dialog>
            </div>

        </div>
        <table>
            <!-- 请求地址一行的三个input -->
            <tr class="input-box">
                <td>
                    <span>请求地址：</span>
                    <el-input v-model="input1" class="w-40 m-2" size="large" placeholder="请输入请求地址" style="width:300px;"
                        clearable />
                </td>
                <td>
                    <span>用户IP：</span>
                    <el-input v-model="input2" class="w-40 m-2" size="large" placeholder="请输入用户IP" style="width:300px;"
                        clearable />
                </td>
                <td>
                    <span>服务器IP：</span>
                    <el-input v-model="input3" class="w-40 m-2" size="large" placeholder="请输入服务器IP" style="width:300px;"
                        clearable />
                </td>
            </tr>
            <!-- 开始时间到结束时间第二行input框 -->
            <tr class="time-input">
                <td>
                    <span>开始时间：</span>
                    <el-date-picker v-model="value11" type="datetime" placeholder="开始时间" style="width: 138px;" />
                    <span class="zhi">至</span>
                    <el-date-picker v-model="value22" type="datetime" placeholder="结束时间" :default-time="defaultTime"
                        style="width: 138px;" />
                </td>
                <td>
                    <span>响应状态：</span>
                    <el-select v-model="value" class="m-2" multiple="true" placeholder="请选择响应状态" size="large"
                        style="width:300px;" clearable>
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </td>
                <td>
                    <span>角色IP： </span>
                    <el-select v-model="value2" class="m-2" placeholder="请选择角色IP" size="large" style="width:300px;">
                        <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"
                            clearable />
                    </el-select>
                </td>
            </tr>
            <!-- 单选框 -->
            <tr class="input-checkbox">
                <td>
                    <span>日志类型：</span>
                    <el-checkbox v-for="city in cities" :key="city" :label="city" style="width:52px;">{{ city
                    }}</el-checkbox>
                </td>
            </tr>
        </table>
        <!-- 中间灰色的线 -->
        <div class="bj"></div>
        <!--查询 重置 删除 导出 按钮 -->
        <div class="Button-box">
            <!-- 左边 -->
            <div class="Button-left">
                <el-icon>
                    <Grid />
                </el-icon>
                <span>系统日志</span>
            </div>
            <!-- 右边 -->
            <div class="button-right">
                <el-button type="primary" :icon="Search">查询</el-button>
                <el-button type="primary" :icon="Refresh" plain>重置</el-button>
                <el-button type="danger" :icon="Delete" @click="del(id)">删除</el-button>
                <el-button type="success" :icon="Download" plain>导出</el-button>
                <!-- 点击设置是否显示 -->
                <el-button :icon="Grid" plain size="larg" text @click="dialogTableVisible = true" />
            </div>

        </div>
        <!-- 表格 -->
        <div class="chart-box">
            <el-table ref="multipleTableRef" border :data="tableDatas" style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column label="选择" >
                    <template v-slot="scope">
                        <el-checkbox v-model="scope.row.check" @change="select(scope.row.id)"></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column property="type" label="浏览器类型" show-overflow-tooltip />
                <el-table-column label="开始时间" width="140px" show-overflow-tooltip>
                    <template #default="scope">{{ scope.row.time }}</template>
                </el-table-column>
                <el-table-column property="name" label="用户信息" />
                <el-table-column property="address" label="请求地址" show-overflow-tooltip />
                <el-table-column property="journal" label="日志类型" />
                <el-table-column property="state" label="响应状态" />
                <el-table-column property="duration" width="70px" label="时长" />
                <el-table-column property="parameter" label="请求参数" />
                <el-table-column property="response" label="响应参数" />
                <el-table-column property="abnormal" label="异常信息" />
                <el-table-column property="address" label="用户IP" width="140px" show-overflow-tooltip />
            </el-table>
        </div>
        <!-- 分页 -->
        <el-config-provider :locale="locale">
            <div class="demo-pagination-block">
                <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize5"
                    :page-sizes="[5, 10, 15, 20]" :small="small" :disabled="disabled" :background="background"
                    layout="total, sizes, prev, pager, next, jumper" :total="100" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" />
            </div>
        </el-config-provider>
    </div>
</template>
<script setup>
import { ElConfigProvider, ElMessage } from 'element-plus'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
// 引入图标
import { Delete, Search, Download, Refresh, Grid, Close, Select }
    from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'
import axios from 'axios'
let locale = zhCn
const input1 = ref('')
// 设置 是否显示
const dialogTableVisible = ref(false)
const input2 = ref('')
const input3 = ref('')
const value = ref('')
const value2 = ref('')
// 响应状态input框
const options = [
    {
        value: '成功',
        label: '成功',
    },
    {
        value: '异常',
        label: '异常',
    },
    {
        value: '其他',
        label: '其他',
    },
    {
        value: 'info',
        label: 'info',
    },
]
// 角色管理input框
const options2 = [
    {
        value2: '测试管理员',
        label: '测试管理员',
    },
    {
        value2: '三级角色测试',
        label: '三级角色测试',
    },

]

const value11 = ref('')
const value22 = ref('')
// 选择时间js
const defaultTime = new Date(2000, 1, 1, 12, 0, 0)

// 设置显示数据
const gridData = [
    {
        date: '1',
        name: '用户名称',

    },
    {
        date: '2',
        name: 'John Smith',

    },
    {
        date: '3',
        name: 'John Smith',

    },
    {
        date: '4',
        name: 'John Smith',
    },
    {
        date: '5',
        name: 'John Smith',
    },
    {
        date: '6',
        name: 'John Smith',
    },
    {
        date: '7',
        name: 'John Smith',
    },
    {
        date: '8',
        name: 'John Smith',
    },
    {
        date: '9',
        name: 'John Smith',
    },
    {
        date: '10',
        name: 'John Smith',
    },
    {
        date: '11',
        name: 'John Smith',
    },
]

// 第二行input时间框
const shortcuts = [
    {
        text: 'Today',
        value: new Date(),
    },
    {
        text: 'Yesterday',
        value: () => {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            return date
        },
    },
    {
        text: 'A week ago',
        value: () => {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            return date
        },
    },
]
// 按钮数据
const cities = ['新建', '删除', '编辑', '异常']



// 表格数据
const tableDatas = ref([])
// 单个数据id
let id = 0

// 加载表格数据
const loadTableDatas = async () => {
    let { data } = await axios.get('management')
    tableDatas.value = data
}


// 获取数据id
const select = async (val) => {
    let { data } = await axios.post('managementsigle', val)
    id = data
}

const del = async (id) => {
    let ret = await axios.post('managementdel', id)
    if (ret) {
        loadTableDatas()
        ElMessage({
            showClose: true,
            message: '删除成功!',
            type: 'success',
        })
    }
}

onMounted(() => {
    loadTableDatas()
})

</script>


<!-- css样式 -->
<style scoped lang='scss'>
.box-whole {
    min-width: 1200px;

    .setp {
        .setp-button {
            margin-top: 10px;
            text-align: center;
        }
    }

    table {
        border-collapse: collapse;

        .input-box {
            height: 60px;


            td {
                text-align: right;
                width: 400px;
            }

            span {
                color: #6f6b6b;
            }
        }

        .time-input {
            height: 60px;

            span {
                color: #6f6b6b;
            }

            td {
                text-align: right;

                .zhi {
                    padding: 0 3px;
                    color: #6f6b6b;

                }
            }
        }

        .input-checkbox {
            span {
                color: #6f6b6b;
            }

            td {
                text-align: right;
            }
        }
    }

    .bj {
        margin: 20px 0;
        height: 5px;
        background: #f1f1f1;
    }

    .Button-box {
        display: flex;
        justify-content: space-between;
        padding: 0 20px;
        align-items: center;

        .Button-left {
            display: flex;
            font-weight: bold;
            align-items: center;
            height: 25px;
            border-bottom: 2px solid black;
        }
    }

    .chart-box {
        margin-top: 10px;
        padding: 0 20px;
    }

    .demo-pagination-block {
        float: right;
        margin: 10px 0;
        padding: 0 20px;
    }
}
</style>